<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp"%>
		
		<link rel="stylesheet" href="/loan_manager/css/common-loading.css">
		
		<style>
			#jquery-table td {
				cursor: pointer !important
			}
			
			.productthumbnail {
				width: 100px;
				height: 100px;
			}
			
			@media (min-width: 768px) and (max-width: 1200px) {
				.backup-text {
					width: 100px !important;
				}
			}
		</style>
	</head>
	<body  class="no-skin">
		<%@ include file="/common/common-loading.jsp"%>
		<div class="page-content">
			<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
				<h1 id="fu_name">
				</h1>
			</div>
			<form id="queryForm" method="post">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">专题信息页</h4>
		
								<div class="widget-toolbar">
									<a href="#" data-action="collapse">
										<i class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>
		
							<div class=" widget-body">
									<div class="widget-main" >
										
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"
												style="text-align: right" for="title">专题名称:</label>
											<div class="col-sm-8" style="padding-left: 0;">
												<input type="text" style="padding-left: 0px" name="title"
													id="title">
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"
												style="text-align: right" for="status">状态:</label>
											<div class="col-sm-8" style="padding-left: 0;">
												<select class="form-control" name="status">
													<option value="">请选择</option>
													<option value="1">上线</option>
													<option value="0">下线</option>
												</select>
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"
												style="text-align: right" for="type">专题类型:</label>
											<div class="col-sm-8" style="padding-left: 0;">
												<select class="form-control" name="type" id="type">
													<option value="">请选择</option>
													<option value="1">首页列表</option>
													<option value="2">商品专题</option>
													<option value="3">介绍专题</option>
													<option value="4">双十二活动专题</option>
												</select>
											</div>
										</div>
										
									</div>
							</div>
						</div>
					</div>
						<div class="col-md-12 center">
						<div class="clearfix form-actions">
						
							<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
								查询
							</button>
							&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;
							<button type="button" name="btn-add" class="btn btn-green  no-border" onclick="addTopic()">
								<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
								新增
							</button>
							
						  </div>
				   </div>
				</div>
		 		<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table" class="table table-striped table-bordered table-hover">
						</table>
					</div>
				</div>
			</div>
			</form>
		</div>
	</body>
</html>

<%@ include file="/common/common-js.jsp" %>
<!-- loading js -->
<script type="text/javascript" src="${ctx}/js/common-loading.js"></script>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<link rel="stylesheet" href="${ctx}/ace/css/just-tip.css"/>
<script src="${ctx}/ace/js/justTools.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
		
    //【查询】按钮Click事件
	function query_any(){
	 	$("#output").removeAttr("style");
		if(jqTable != null){
			jqTable.fnDraw();
		} else {
			loaddata();
		}
		 $("#delete_btn").attr("style","display:block");
		 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
	 };
	
	 var jqTable = null;
	 var loaddata = function(){
		jQuery(function($) {
			jqTable = $('#jquery-table').dataTable( {
			    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
			    "columnDefs": [
			     	{	  
						  "title":'排序',
						  "targets": [0],
						  "data": "",   //JSON返回属性
						  "bSortable": false,
						  "width": "5%",
						  "render": function(value, type, row) { // 返回自定义内容
							  return '<i class="glyphicon glyphiconfir glyphicon-chevron-up" data-tabindex="'+row.id+'"></i><br><i class="glyphicon glyphicon-chevron-down"></i>';
						  } 
					},
					{	  
						  "title":'专题ID',
						  "name":"id",
						  "data": "id",
						  "targets": [1],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
					{	  
						  "title":'专题名称',
						  "name":"title",
						  "data": "title",
						  "targets": [2],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
					{	  
						  "title":'专题类型',
						  "name":"type",
						  "data": "type",
						  "targets": [3],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%",
						   "render": function(value, type, row) {
							  switch(value){
								case 1:return "首页列表";
								case 2:return "商品专题";
								case 3:return "介绍专题";
								default : return "";
							} 	
						  } 
					},
					{	  
						  "title":'位置',
						  "name":"sort_index",
						  "data": "sort_index",
						  "targets": [4],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
			    	{	  
						  "title":'专题链接',
						  "name":"link",
						  "data": "link",
						  "targets": [5],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
					{	  
						  "title":'状态',
						  "name":"status",
						  "data": "status",
						  "targets": [6],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%",
						  "render": function(value, type, row) {
							  switch(value){
								case 1:return "上线";
								case 0:return "下线";
								default : return "";
							} 	
						  } 
					},
					{	  
						  "title":'创建人/修改人',
						  "name":"operator",
						  "data": "operator",
						  "targets": [7],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
					{	  
						  "title":'创建时间',
						  "name":"ctime",
						  "data": "ctime",
						  "targets": [8],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%"
					},
					{	  
						  "title":'操作',
						  "name":"operation",
						  "data": "operation",
						  "targets": [9],
						  "class": "center",
						  "bSortable": false,
						  "width": "1%",
						  "render": function(value, type, row) {
						  		var online = 1;
						  		var offline = 0;
						  		var temp =  "<input class='btn btn-success btn-sm' type='button' name='edit' value='编辑' onclick='editTopic("+ row.id +")'/>&nbsp;&nbsp;&nbsp;&nbsp;";
								if(row.status == 1){
									temp += "<input class='btn btn-success btn-sm' type='button' name='online' value='下线' onclick='updateStatus("+ row.id + "," + offline +")'/>&nbsp;&nbsp;&nbsp;&nbsp;";
								}else{
									temp += "<input class='btn btn-success btn-sm' type='button' name='offline' value='上线' onclick='updateStatus("+ row.id + "," + online +")'/>&nbsp;&nbsp;&nbsp;&nbsp;";	
								}
	                         	return temp;
					    	 }
					},
			  	],
				"sAjaxSource": ctx+"/mallTopic/getTopicList.action?rand=" + Math.random(),
				"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
			   			var data = $('#queryForm').serializeObject();
						
						data.aoData = JSON.stringify(aoData);
						$.ajax({
							"type": "POST",
							"dataType": 'json',
							"url": sSource,
							"data":data,
							"timeout":300000,
							"beforeSend": function() {
								// 显示loading
								showLoading();
							},
							"success": function(resp){
								console.info(resp);
								hideLoading();
								fnCallback(resp);
								initListPage();
								
							},		
							"error": function(XMLHttpRequest, textStatus, errorThrown) {
								alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
							},			
							"complete": function () {
								hideLoading();
							}
					});
				},
				"sScrollXInner": "100%",
				"sScrollY": "100%",//如果不设置，IE会有问题
			    "aaSorting": [[2,"desc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
			});
			
			
		});
	}
	
	$(document).ready(function() {
		//时间范围插件初始化
			$('.date-picker').datepicker({
				autoclose : true,
				format : 'yyyy-mm-dd'
			});
			
			
		//上移
        $('#jquery-table').delegate('.glyphicon-chevron-up','click',function(){
			var arr = new Array();
			var thispos=$(this).parent('td').parent('tr');
			var thishtml=thispos.clone();
			var prevpos=$(this).parent('td').parent('tr').prev();
			var thisindex = thispos.index();
			if(thisindex==0){
				$('.discovery-up').show();
				setTimeout("$('.discovery-up').hide()",3000);
			}else{
				thispos.remove();
				prevpos.before(thishtml);
				$('#jquery-table tbody tr').each(function(){
					arr.push($(this).find('td:nth-child(1)').find('.glyphicon-chevron-up').attr('data-tabindex'));
				});
				var arrstring = arr.join("#");
				alert(arrstring);
				console.log(arrstring);
				 $.ajax({
					url: ctx+'/mallTopic/sortTab.action',
					type: 'POST',
					dataType: 'json',
					data: {"prdSortList": arrstring},
					success:function(data){
                        console.log(data);
					},
					error:function(){
						console.log('排序失败');
					}
				});
			  }
			});
			
	        //下移
			$('#jquery-table').delegate('.glyphicon-chevron-down','click',function(){
				var arr = new Array();
				var thispos=$(this).parent('td').parent('tr');
				var thishtml=thispos.clone();
				var nextpos=$(this).parent('td').parent('tr').next();
				var thisindex = thispos.index();
				if(thisindex==$("#jquery-table tbody tr").length - 1){
					$('.discovery-down').show();
					setTimeout("$('.discovery-down').hide()",3000);
				}else{
					thispos.remove();
			        nextpos.after(thishtml);
					$('#jquery-table tbody tr').each(function(){
						arr.push($(this).find('td:nth-child(1)').find('.glyphicon-chevron-up').attr('data-tabindex'));
					});
					var arrstring = arr.join("#");
					 $.ajax({
						url: ctx+'/mallTopic/sortTab.action',
						type: 'POST',
						dataType: 'json',
						data: {'prdSortList': arrstring},
						success:function(data){
	                        console.log(data);
						},
						error:function(){
							console.log('排序失败');
						}
					}); 
					
				}
			}); 
			
			
		$("#output").hide();
	});
	
	
	function addTopic() {
        openDialogWithRand("/mallTopic/showAddOrEditPage.action",1000,1200,"新增专题",function (data){
			query_any();
		});
    }
    
    function editTopic(id){
    	 openDialogWithRand("/mallTopic/showAddOrEditPage.action?id="+id,1000,1200,"编辑专题",function (data){
			query_any();
		});
    }
    
    function updateStatus(id,status){
			var data = {"id":id,"status": status};
			$.ajax({
				type:"post",	
				async:true,
				data:data,
				url: ctx + "/mallTopic/updateStatus.action?rand=" + Math.random(),
				success:function(resp){
					alert("操作成功");
					query_any();
				},
				error:function(error){
					alert("操作失败");
				}
			});
		}
		
</script>